<template>
	<view id="filterBox">
		<scroll-view class="es-filter__scroll"  scroll-x :show-scrollbar="false" :style="{padding:padding}">
			<view class="es-filter-item__wrapper" v-for="(item,index) in filterList" >
				<view class="es-filter-item" @tap="onClick(index)"
				:style="{background:item.show===true||item.label?activeBg:btnBg,marginLeft:index===0?'20rpx':'0'}">
					<!-- 按钮名称 -->
					<view class="es-filter__text" :style="{fontSize:fontSize,lineHeight:'50rpx',color:item.show===true||item.label?activeColor:color}"
					>{{item.label||item.name||'请选择'}}</view>
					<!-- 展开图标 -->
					<view v-if="item.type !== 'button'" class="esfont es-filter__expand"
						:style="{color:item.show===true||item.label?activeColor:color,
						'transform': item.show===true?'rotate(-180deg)':'rotate(0)'}">&#xe707;</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 遮罩层，用于弹窗时防止用户点击空白区域 -->
		<view v-if="showMask" @tap="onClickFilterMask" @touchmove.stop.prevent
			class="es-filter__mask" :style="{height:maskHeight+'px'}"></view>
			
		<block v-for="(item,index) in filterList">
			<!-- 地区选择 -->
			<es-filter-area  v-if="item.type==='area'" :key="item.field"
			 :show="item.show" :value="item.value" :top="maskHeight+'px'" :height="item.height" :background="background"
			 :enable-location="item.enableLocation" :activeBg="activeBg" :activeColor="activeColor"  :zIndex="zIndex"
			 @confirm="onAreaChange($event,index)"  @close="onClose(index)"></es-filter-area>
			 <!-- 下拉选择 -->
			 <es-filter-select v-else-if="item.type==='select'" :key="item.field" :background="background"
			  :show="item.show" :value="item.value"  :top="maskHeight+'px'" :height="item.height"
			  :activeBg="activeBg" :activeColor="activeColor" :zIndex="zIndex"
			  :options="item.options" :column="item.column"  :multiple="item.multiple"
			   @confirm="onSelectChange($event,index)"  @close="onClose(index)"></es-filter-select>
		</block>
	</view>
</template>

<script>
	import esFilterArea from '../es-filter-area/es-filter-area';
	import esFilterSelect from '../es-filter-select/es-filter-select';
	export default {
		components:{
			esFilterArea,
			esFilterSelect
		},
		props:{
			// 搜索栏按钮列表
			//field 字段名称
			//type area-地区 select-选择 button-按钮
			//name 按钮名称
			//label 组件上显示的值
			//value 传给接口的值
			list: {
				type: Array,
				default () {
					return []
				}
			},
			// 按钮背景色
			btnBg:{
				type:String,
				default:"#f6f8fb"
			},
			//弹出面板背景色
			background:{
				type:String,
				default:"#ffffff"
			},
			// 展开时的按钮背景色
			activeBg:{
				type:String,
				default:"#45D4A8"
			},
			// 文字颜色
			color:{
				type:String,
				default:"#555555"
			},
			// 展开时文字颜色
			activeColor:{
				type:String,
				default:"#ffffff"
			},
			//字体大小
			fontSize:{
				type:String,
				default:"25rpx"
			},
			padding:{
				type:String,
				default:"20rpx 0"
			},
			zIndex:{
				type: Number,
				default: 999
			},
		},
		data(){
			return {
				filterList:[],
				showMask:false,
				maskHeight:0
			}
		},
		watch:{
			list(vals) {
				this.initData(vals)
			},
		},
		created() {
			 this.initData(this.list)
		},
		mounted(){
			
		},
		methods:{
			onAreaChange(e,index){
				this.$set(this.filterList[index],"value",{
					distance:e.distance,
					province:e.province,
					city:e.city
				});
				this.$set(this.filterList[index],"label",e.name);
				this.onClose(index);
				this.onChange();
			},
			onSelectChange(e,index){
				this.$set(this.filterList[index],"value",e.value);
				this.$set(this.filterList[index],"label",e.label);
				this.onClose(index);
				this.onChange();
			},
			onClick(index){
				this.$set(this.filterList[index],"show",!this.filterList[index].show);
				let item = this.filterList[index];
				if(item.type !== 'button'){
					//获取遮罩距离顶部高度
					this.getMaskHeight();
					this.showMask = true;
				}else{
					this.$set(this.filterList[index],"value",!this.filterList[index].value);
					this.onChange();
				}
			},
			getMaskHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select("#filterBox")
				  .boundingClientRect((data) => {
					  this.maskHeight =  data.top + data.height;
					  // #ifdef H5
					  this.maskHeight += uni.getSystemInfoSync().windowTop;
					  // #endif
				  })
				  .exec();
			},
			onClickFilterMask(){
				this.showMask = false;
				this.filterList = this.filterList.map(item=>{
					if(item.type !== 'button'){
						item.show = false;
					}
					return item;
				})
			},
			onChange(){
				this.$emit("change",this.filterList);
			},
			onClose(index){
				this.$set(this.filterList[index],"show",false);
				this.showMask = false;
				this.$emit("close",{index,index});
			},
			initData(){
				this.filterList = JSON.parse(JSON.stringify(this.list));
			}
		}
	}
</script>

<style scoped>
	::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		color: transparent !important;
		display: none;
	}
	
	.es-filter__scroll{
		width: 750rpx;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.es-filter-item__wrapper{
		display: inline-block;
	}
	
	.es-filter-item{
		display: flex;
		flex-direction: row;
		height: 50rpx;
		/* #ifdef H5 */
		line-height: 50rpx;
		/* #endif */
		border-radius: 50rpx;
		padding: 0 25rpx;
		margin-right: 20rpx;
	}
	
	.es-filter__text{
		max-width: 150rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	
	.es-filter__expand{
		line-height: 50rpx;
		font-size:15rpx;
		margin-left:10rpx;
		transition: all 0.3s;
	}
	
	.es-filter__mask{
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>